<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h1>子传父：子组件将数据传给父组件</h1>
    <mark>子组件传过来的值：{{info}}</mark>
    <child @post="getData"></child>
  </div>
  <script src="./vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data() {
        return {
          info: ''
        }
      },
      methods: {
        // 2.监听自定义事件，并接受数据
        getData(info) {
          this.info = info;
        }
      },
      components: {
        child: {
          template: `
            <div>
              <hr />
              <p>我是子组件，我要将数据传给父组件</p>
              <button @click="post">传值</button>
              <hr />
            </div>
          `,
          data() {
            return {
              msg: '来自子组件的数据'
            }
          },
          methods: {
            post() {
              // 子传父的代码
              // 1.发射一个自定义事件，带上数据作为参数
              this.$emit('post', this.msg);
            }
          },
        }
      }
    });
  </script>
</body>
</html>